<template>
  <a-row class="totalBox">
    <div ref="ELine" class="e-line"></div>
  </a-row>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  name: 'ELine',
  props: {
    // 图表选项
    eLineData: {
      type: Object,
      required: true
    },
    lineShow: {
      type: Boolean,
      default: false,
      required: true
    },
    isPresent:{
      type:Boolean,
      default:true
    },
    isBackColor:{
      type:Boolean,
      default:true
    }
  },
  
  data() {
    return {
      // isBackColor:true,
      myChart: null,
      chartOption: {
        //   color: ['#4874cb',"#ee823a" ,"#f2bb43"],
        tooltip: {
          trigger: 'axis'
        },
        dataZoom: {
          show: true,
          type: 'slider', // 单独滚动条
          filterMode: 'none', // 不过滤数据 - 保证 y 轴数据范围不变 filter
          brushSelect: true,
          height: 5,
          start: 30,
          end: 75,
          left: 100,
          right: 40,
          bottom: 30,
          backgroundColor: 'transparent',
          // 选中范围的填充颜色
          fillerColor: 'transparent',
          borderWidth: 0,
          borderColor: 'transparent',
          dataBackground: {
            lineStyle: {
              color: 'transparent'
            },
            areaStyle: {
              color: 'transparent'
            }
          },
          selectedDataBackground: {
            lineStyle: {
              color: 'transparent'
            },
            areaStyle: {
              color: 'transparent'
            }
          },

          startValue: 0,
          endValue: 18,
          xAxisIndex: [0],
          showDetail: false,

          handleSize: '0%',
          // 移动手柄尺寸高度
          // 测试发现手柄颜色和边框颜色会出现 偏差，所有设置手柄高度为0, 添加边框高度。由边框撑起高度
          moveHandleSize: 0, // 设置拖动手柄高度为0，只由边框负责高度展示
          // 不展示拖动手柄图标
          moveHandleIcon: 'none',
          moveHandleStyle: {
            borderColor: '#aaaa',
            borderWidth: 5, // 设置边框高度
            borderType: 'solid',
            borderCap: 'round',
            // 保证拖动手柄右边框结尾有圆角
            borderJoin: 'round'
          },
          // 拖动高亮时设置
          emphasis: {
            moveHandleStyle: {
              borderColor: '#aaaa',
              borderWidth: 5,
              borderType: 'solid',
              borderCap: 'round'
            }
          }
        },
        xAxis: {
          type: 'category',
          // boundaryGap: false,
          data: [],
          axisLabel: {
            color: '#666',
            margin: 20
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          scale: true,
          min: 0,
          nameTextStyle: {
            color: '#666666'
            //   padding: [0, 0, 0, 50]
          }
        },
        series: [],
        grid: {
          top: '50',
          right: '40',
          bottom: '10',
          left: '10',
          containLabel: true
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    setChart() {
      /**
       * 折线图
       * xAxis.data  折线图数据
       * color  折线图颜色
       * name  折线图名称
       * legend  折线图图例
       */
      var chartDom = this.$refs.ELine
      this.myChart = this.$echarts.init(this.$refs.ELine)
      const { xAxis, color, name, legend, series } = this.eLineData
      let option = this.$clone(this.chartOption)
      option.dataZoom = series[0].data.length > 7 ? this.chartOption.dataZoom : { show: false }
        // this.start = series[0].data.length > 7 ? option.dataZoom.start * 1 : 0
        // this.end = series[0].data.length > 7 ? option.dataZoom.end * 1 : 100
      option.xAxis.data = xAxis.data
      option.color = color
      option.yAxis.name = name
      option.legend = legend
      option.series = series
      this.myChart.setOption(option)
      let changeSize = elementResizeDetectorMaker()
      let _this = this
      changeSize.listenTo(chartDom, () => {
        //chartDom为之前获取到的容器名
        _this.$nextTick(() => {
          this.myChart.resize()
        })
      })
      option = {
        // title: {
        //     text: 'Stacked Line'
        // },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        // grid: {
        //     left: '3%',
        //     right: '5%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        // xAxis: {
        //     type: 'category',
        //     boundaryGap: false,
        //     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        // },
        // yAxis: {
        //     type: 'value'
        // },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: 'Direct',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: 'Search Engine',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
      // console.log(this.myChart);
      // option && this.myChart.setOption(option);
    }
  },
  watch: {
    lineShow: {
      handler(newVal, oldVal) {
        if (newVal === true) {
          this.$nextTick(() => {
            this.setChart()
          })
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.e-line {
  height: 223px;
  width: 100%;
}

</style>
